﻿
var aisleName = []; // string of aisle names (may not be needed)
var aisleLeft = []; // string of categories
var aisleRight = []; // string of categories

$.getJSON("maphandler.ashx", function (data) {
    for (var i = 0; i < data.length; i++) {
        //aisleName[data[i].Name] = data[i].Name; // might not need this
        aisleLeft[data[i].Name] = []; // 2d array
        aisleRight[data[i].Name] = []; // 2d array
        var j;
        for (j = 0; j < data[i].CategoryListLeft.length; j++) { // populate left 2d array [name][index]
            aisleLeft[data[i].Name][j] = data[i].CategoryListLeft[j].Name;
        }
        for (j = 0; j < data[i].CategoryListRight.length; j++) { // populate left 2d array [name][index]
            aisleRight[data[i].Name][j] = data[i].CategoryListRight[j].Name;
        }
    }
});


$(function () {
    $('#map-container AREA').hover(function (e) {
        var i;
        if (aisleLeft[this.id].length > aisleRight[this.id].length) {// set length of longest side of aisle
            i = aisleLeft[this.id].length;
        }
        else {
            i = aisleRight[this.id].length;
        }

        var html = '<div id="info">'; // create div to display
        html += '<h1>' + this.alt + '</h1>'; // aisle name
        html += '<table>'; // begin table
        html += '<tr><th>Left Side</th><th>Right Side</th></tr>'; // table header

        for (var j = 0; j < i; j++) {   // generate table of categories for aisle
            html += '<tr>';  // start row
            if (aisleLeft[this.id][j] != null) { // check if empty category
                html += '<td>' + aisleLeft[this.id][j] + '</td>'; // left side
            }
            else {
                html += '<td></td>';
            }
            if (aisleRight[this.id][j] != null) { // check if empty category
                html += '<td>' + aisleRight[this.id][j] + '</td>'; // right side
            }
            else {
                html += '<td></td>';
            }
            html += '</tr>'; // end row
        }

        html += '</table>'; // end table
        html += '</div>'; // close div

        // display box
        $('body').append(html).children('#info').hide().fadeIn(400);
        $('#info').css('top', e.pageY).css('left', e.pageX + 15);

    }, function () { // mouse off aisle
        $('#info').remove();
    });

    $('#map-container AREA').mousemove(function (e) {  // box follows mouse movement
        $('#info').css('top', e.pageY).css('left', e.pageX + 15);
    });
});



//var x = 0; //Starting Location - left
//var y = 0; //Starting Location - top
//var dest_x = 50;  //Ending Location - left
//var dest_y = 50;  //Ending Location - top
//var interval = 1; //Move 1px every initialization

//function moveImage() {
//    //Keep on moving the image till the target is achieved
//    if (x < dest_x) x = x + interval;
//    if (y < dest_y) y = y + interval;

//    //Move the image to the new location
//    document.getElementById("dot").style.top = y + 'px';
//    document.getElementById("dot").style.left = x + 'px';

//    if ((x + interval < dest_x) && (y + interval < dest_y)) {
//        //Keep on calling this function every 100 microsecond 
//        //	till the target location is reached
//        window.setTimeout('moveImage()', 100);
//    }
//};